<template>
    <div class="hotlist">
  <div class="bar">
   <div>职场问题</div>
   <div>前端开发</div>
  </div>
  <section v-for="(item,index) in newbool" :key="index">
    <ul>
      <li class="first">{{item.qest}}</li>
      <li class="sec">{{item.num}}</li>
    </ul>
  </section>
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return{
        hot:[]
      }
    },
 computed:{
  newbool(){
    this.$store.dispatch('HOT_QUEST')
   return this.$store.state.caixia.hot
  }

  
    }
    
  
  }
  </script>
  
  <style lang="scss" scoped>
  .bar{
      width: 100%;
      height: .4rem;
     
      display: flex;
      align-items: center;
      div{
        width: 1rem;
        transform: scale(.8);
        margin-left: .1rem;
        background-color: #64bfbb;
        color: white;
        text-align: center;
        border-radius: .15rem;
      }
  }
  section{
    height: .8rem;
    width: 100%;
   
    line-height: .4rem;
    border-top: .01rem solid rgba(128, 128, 128, 0.087);
    border-bottom: .01rem solid rgba(128, 128, 128, 0.158);
    .first{
      font-weight: 700;
      text-indent: .2rem;
    }
    .sec{
      transform: scale(.7);
      color: rgba(128, 128, 128, 0.306);
      transform-origin: left top;
      text-indent: .3rem;
    }
  }
  </style>